<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>

    <style>
        input[disabled] {
            cursor: not-allowed;
        }

        ul {
            height: 100px;
        }

        li {
            float: left;
            list-style: none;
            margin: 10px 20px;
        }
    </style>
</head>

<body>

    <div class="content">

        <div class="cartList">
            <ul>
                <li>¥<input type="text" name="price" value="21.90"></li>
                <li><input type="button" name="minus" value="-">
                    <input type="text" name="amount" value="1">
                    <input type="button" name="plus" value="+"></li>
                <li id="price0">¥21.90</li>
                <li>
                    <p>移入收藏</p>
                    <p>删除</p>
                </li>
            </ul>
            <ul>
                <li>¥<input type="text" name="price" value="24.00"></li>
                <li><input type="button" name="minus" value="-">
                    <input type="text" name="amount" value="1">
                    <input type="button" name="plus" value="+"></li>
                <li id="price1">¥24.00</li>
                <li>
                    <p>移入收藏</p>
                    <p>删除</p>
                </li>
            </ul>
            <ul>
                <li>¥<input type="text" name="price" value="44.00"></li>
                <li><input type="button" name="minus" value="-" disabled>
                    <input type="text" name="amount" value="1">
                    <input type="button" name="plus" value="+"></li>
                <li id="price2">¥24.00</li>
                <li>
                    <p>移入收藏</p>
                    <p>删除</p>
                </li>
            </ul>
            <ul>
                <li>¥<input type="text" name="price" value="54.00"></li>
                <li><input type="button" name="minus" value="-">
                    <input type="text" name="amount" value="1">
                    <input type="button" name="plus" value="+"></li>
                <li id="price3">¥24.00</li>
                <li>
                    <p>移入收藏</p>
                    <p>删除</p>
                </li>
            </ul>
            <ul>
                <li>¥<input type="text" name="price" value="64.00"></li>
                <li><input type="button" name="minus" value="-">
                    <input type="text" name="amount" value="1">
                    <input type="button" name="plus" value="+"></li>
                <li id="price4">¥24.00</li>
                <li>
                    <p>移入收藏</p>
                    <p>删除</p>
                </li>
            </ul>
            <ol>
                <li id="totalPrice">&nbsp;</li>
                <li><span>结 算</span></li>
            </ol>
        </div>
    </div>
    <script>
        var plusBtns = document.getElementsByName("plus");
        var amounts = document.getElementsByName("amount");
        var minusBtns = document.getElementsByName("minus");

        var prices=document.getElementsByName("price");
        function   calProduct(i){
            var   p=prices[i].value;
                var   a=amounts[i].value;
                var  productPrice=(p*a).toFixed(2);
                var  price=document.getElementById("price"+i);
                price.innerHTML="￥"+productPrice;
                calTotalPrice();
         }

       for (let i = 0; i < plusBtns.length; i++) {
            plusBtns[i].onclick = function () {
                amounts[i].value++;
                if (amounts[i].value > 1) {

                    minusBtns[i].removeAttribute("disabled");
                }
                calProduct(i);
               
              }
            minusBtns[i].onclick = function () {
                if (amounts[i].value > 1) {
                    amounts[i].value--;
                }
                if (amounts[i].value == 1) {
                    this.disabled = "disabled";
                }
                calProduct(i);
                 }
                 }
            function  calTotalPrice(){
                var  total=0;
                for(var  i=0;i<plusBtns.length;i++){
                    var  price=document.getElementById("price"+i);
                    var  productPrice=parseFloat(price.innerHTML.substring(1));
                    total+=productPrice;


             }
                 totalPrice.innerHTML="￥"+total;
            






            }









    </script>
</body>

</html>